import React from 'react';

import {
  View,
  TouchableOpacity,
  Text,
  Picker,
} from 'react-native';

import {SearchBar} from 'react-native-elements';
import Platform from 'Platform';

import Config from '../../config';
import SizeUtils from '../../common/SizeUtils';
import WH_Constants from './WH_Constants';
import CommonStyles from '../../common/CommonStyles';
import BaseItem from '../common/BaseItem';
import WH_PostItemView from './WH_PostJDZItemView';
import CommonSearchListPage from '../common/CommonSearchListPage';
import TImage from '../../components/TImage';
import WH_SendSearchAction from '../../actions/workhard/WH_SendSearchAction';
import CommonShowPickerAction from '../../actions/common/CommonShowPickerAction';
import ToastUtils from '../../common/ToastUtils';
const DEFAULT_SUB_TAG = {key:0, value:"全部分类"};

export default class WH_SearchPage extends CommonSearchListPage {
  constructor(props) {
    super(props);

    this.state.sub_tag = DEFAULT_SUB_TAG;

    this.tagArr = [DEFAULT_SUB_TAG];
    if(Platform.OS === "android"){
      this.state.sub_tag = this.tagArr[0]
    }
    for (var i = 0; i < WH_Constants.SUB_NEWTAG.length; i++) {
      this.tagArr.push(WH_Constants.SUB_NEWTAG[i]);
    }

    this._dataKey = "post_id";
  }

  _renderTopView() {
    return (
      <View style={{flexDirection:"row",
         borderColor: '#eeeeee',
         height:SizeUtils.translateDesignHeightToCode(90),
         paddingLeft:SizeUtils.translateDesignWidthToCode(40),
         paddingRight:SizeUtils.translateDesignWidthToCode(40),
         borderBottomWidth: SizeUtils.translateDesignNumToCode(3)}}>
        {this._renderTypeSelector()}
        {this._renderSearchBg()}
      </View>
    )
  }

  _renderTypeSelector() {
    if(Platform.OS === "ios"){
      return  (<TouchableOpacity style={{width:SizeUtils.translateDesignWidthToCode(150),
          height:SizeUtils.translateDesignHeightToCode(90), justifyContent:"center",}}
           onPress={this._onPressChooseType.bind(this)}>
         <Text style={{fontSize:SizeUtils.translateFontSizeToCode(28)}}>
           {this.state.sub_tag.value}
         </Text>
       </TouchableOpacity>)
   }else{
      return (<Picker
           style={{width:SizeUtils.translateDesignWidthToCode(150),
          height:SizeUtils.translateDesignHeightToCode(90), justifyContent:"center",}}
           selectedValue={this.state.sub_tag.value}
           mode="dialog"
           onValueChange={(value) => this._onPickerCallback(value)}>
           {this.tagArr.map((item, index) =>
             { return(
                <Picker.Item
                  key={index}
                  value={item.value}
                  label={item.value}
                />
              )}
           )}
         </Picker>)
       }
  }

  _onPressChooseType() {
    let tagArr2 = [];
      for (var i = 0; i < WH_Constants.SUB_NEWTAG.length; i++) {
      tagArr2.push(WH_Constants.SUB_NEWTAG[i].value);
    }

    new CommonShowPickerAction().call(this, {pickerData:tagArr2,
      callback:this._onPickerCallback.bind(this)});
  }

  _onPickerCallback(selectedValue) {

    let selectedData = DEFAULT_SUB_TAG;
    for (var i = 0; i < WH_Constants.SUB_NEWTAG.length; i++) {
      if(selectedValue == WH_Constants.SUB_NEWTAG[i].value) {
        selectedData = WH_Constants.SUB_NEWTAG[i];
        break;
      }
    }

    this.setState({
      sub_tag:selectedData,
    });
    this._onSubmitEditing();
  }

  _renderItem(item, index) {

  }

  _getSearchBarContainerStyle() {
    return {width:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(320),
      borderTopWidth:0,borderBottomWidth:0,
      height:SizeUtils.translateDesignHeightToCode(62),backgroundColor:"#00000000",};
  }

  _getListViewStyle() {
    return {
        height:(SizeUtils.getWindowSize().height - Config.paddingTop - SizeUtils.translateDesignHeightToCode(40 + 90)),
        backgroundColor:"#ffffff"};
  }

  _onRenderItem(data, index) {
    return (<WH_PostItemView data={data} index={index} />)
  }

  _sendAction(page, listView) {
    new WH_SendSearchAction().call(listView, {searchText:this.state.searchText, page:page, tag:1, sub_tag:this.state.sub_tag.key})
  }
}


class Item extends BaseItem {
  render() {
    return(
      <View
        style={{flexDirection:"column",
            paddingBottom:SizeUtils.translateDesignHeightToCode(16),
            marginTop:SizeUtils.translateDesignHeightToCode(16),
            borderColor:"#eeeeee",
            borderBottomWidth:this.props.data.title ? SizeUtils.translateDesignNumToCode(3) : 0}}>
          {this._renderTitle()}
          {this._renderImage()}
          {this._renderContent()}
          {this._renderBottomText()}
      </View>
    )
  }

  _renderImage() {
    if(this.props.data.image_url && this.props.data.image_url != "") {
      return(
        <View style={{flex:1, justifyContent:"center", paddingTop:SizeUtils.translateDesignHeightToCode(30),
            paddingBottom:SizeUtils.translateDesignHeightToCode(30)}}>
          <TImage source={{uri:this.props.data.image_url}}
            style={{width:670,
              height:300}}/>
        </View>
      )
    }
    else {
      return (
        <View style={{height:SizeUtils.translateDesignHeightToCode(8)}}>
        </View>
      )
    }
  }

  _renderContent() {
    return(
      <View style={{flex:1}}>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(26), color:"#999999"}} numberOfLines={3}>
          {this.props.data.content}
        </Text>
      </View>
    )
  }

  _renderBottomText() {
    if(this.props.data.title) {
      return(
        <View style={{flex:1}} >
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(22), color:"#999999"}}>
            {this.props.data.likers_num + " 赞 · " + this.props.data.comments_num + " 评论 · " + this.props.data.readers_num + " 阅读"}
          </Text>
        </View>
      )
    }
  }

  _renderTitle() {
    if(this.props.data.title) {
      return(
        <View>
          <Text
            style={[CommonStyles.primaryText, {fontSize:SizeUtils.translateFontSizeToCode(32), lineHeight:SizeUtils.translateDesignHeightToCode(50),
                color:"#333333", fontWeight:"bold",
                paddingTop:SizeUtils.translateDesignWidthToCode(5), backgroundColor:"#00000000", borderWidth:0}]}>
              {this.props.data.title}
          </Text>
        </View>
      )
    }
  }
}
